<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/6/28 0028
  Time: 15:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>注册</title>
    <style>
        .num_error{  right:0.5rem; top:0; color:#cb1448;}
    </style>
    <%--<script src="${ctx}/assets/public_skin/js/jquery-1.11.1.min.js" type="text/javascript"></script>--%>
    <%--<script src="${ctx}/assets/public_skin/js/shop.common.js" type="text/javascript"></script>--%>
    <script type="text/javascript">
        $(function($) {
            var countdown = 5;
            $("#getVerifyCode").click(function () {
                        var obj = $(this);
                        var phoneNum = $("#userPhone").val();
                        if (phoneNum == null || phoneNum == "") {
                            $("#user-name-label > .t_error").remove();
                            $("#userPwd-label > .t_error").remove();
                            $("#user-number-label > .num_error").remove();
                            $("#user-name-label").append('<span class="t_error">请输入手机号码</span>');
                        } else {
                            $.post(
                                    "${ctx}/checkPhoneNum",
                                    {
                                        "phoneNum": phoneNum
                                    },
                                    function (backdata) {
                                        if (backdata == "yes") {
                                            $("#user-name-label > .t_error").remove();
                                            $("#userPwd-label > .t_error").remove();
                                            $("#user-number-label > .num_error").remove();
                                            $("#user-name-label").append('<span class="t_error">手机号码存在</span>');
                                        } else if (backdata == "no") {
                                            var hasClick = $(obj).attr("hasclick");
                                            if (hasClick == 1) {
                                                countdown = 60;
                                                $.ajax({
                                                    type: "GET",
                                                    url: "${ctx}/user/register_phone/" + phoneNum,
                                                    dataType: "JSON",
                                                    success: function (msg) {
                                                        if (msg == 0) {
                                                            $("#user-name-label > .t_error").remove();
                                                            $("#userPwd-label > .t_error").remove();
                                                            $("#user-number-label > .num_error").remove();
                                                            $("#msg").html("验证码发送成功");
                                                            settime(obj);
                                                        }
                                                    }
                                                });
                                            }
                                        }
                                    }
                            )
                        }

                    }
            );

            function settime(val) {
                if (countdown == 0) {
                    //                $(val).removeAttribute("disabled");
                    $(val).attr("hasclick", "1");
                    $(val).text("免费获取验证码");
                } else {
                    $(val).attr("hasclick", "0");
                    //                $(val).("disabled", true);
                    $(val).text("重新发送(" + countdown + ")");
                    countdown--;
                    setTimeout(function () {
                        settime(val)
                    }, 1000);
                }
            }

        });

        function checkUser() {
            var userPwd = document.getElementById("userPwd"); //获取密码框值
            var userPhone = document.getElementById("userPhone");  //获取手机框值
            var number = document.getElementById("number"); //获取验证码框值
            if (userPhone.value == null || userPhone.value == "") {
                $("#user-name-label > .t_error").remove();
                $("#user-name-label").append('<span class="t_error">请输入手机号码</span>');
                return false;
            } else {
                var pattern = /^1[3|5|7|8|][0-9]{9}$/;
                if (!pattern.test(userPhone.value)) {
                    $("#user-name-label > .t_error").remove();
                    $("#userPwd-label > .t_error").remove();
                    $("#user-number-label > .num_error").remove();
                    $("#user-name-label").append('<span class="t_error">手机号码格式不正确</span>');
                    return false;
                }
                if (userPwd.value == null || userPwd.value == "") {
                    $("#user-name-label > .t_error").remove();
                    $("#userPwd-label > .t_error").remove();
                    $("#user-number-label > .num_error").remove();
                    $("#userPwd-label").append('<span class="t_error">请输入密码</span>');
                    return false;
                }
                if (number.value == null || number.value == "") {
                    $("#user-name-label > .t_error").remove();
                    $("#userPwd-label > .t_error").remove();
                    $("#user-number-label > .num_error").remove();
                    $("#user-number-label").append('<span class="num_error">请输入验证码</span>');
                    return false;
                } else {
                    if (number.value.length < 4) {
                        $("#user-name-label > .t_error").remove();
                        $("#userPwd-label > .t_error").remove();
                        $("#user-number-label > .num_error").remove();
                        $("#user-number-label").append('<span class="num_error">请输入正确的验证码</span>');
                        return false;
                    }
            }
            }
            document.getElementById("phoneForm").submit();
        }
    </script>
</head>

<body>
<article class="viewports">
    <form:form modelAttribute="RegisterEntity" id="phoneForm" method="post">
        <div class="p40 login_reg">
            <ul class="list_item2 odr3 r5 mt30">
                <li class="odr3_b" id="user-name-label">
                    <i class="ico-30 ico_user"></i>
                    <form:input path="userPhone" cssClass="i_text" type="text" placeholder="手机号" maxlength="11"></form:input>
                </li>
                <form:errors path="userPhone" cssClass="num_error"></form:errors>
                <li class="" id="userPwd-label">
                    <i class="ico-30 ico_password"></i>
                    <form:password path="userPwd" cssClass="i_text" placeholder="密码" maxlength="16"></form:password>
                        <%--<input id="userPwd" name="userPwd" class="i_text" type="text" value="" placeholder="密码">--%>
                </li>
                <form:errors path="userPwd" cssClass="num_error"></form:errors>
            </ul>
            <div class="layout-box lh2 mt20">
                <div class="odr3 r5 plr20">
                    <form:input path="number" cssClass="i_text" placeholder="输入验证码" maxlength="4"></form:input>
                    </div>
                <div class="box-col tar">
                    <a id="getVerifyCode" class="c-33ccff" href="javascript:void(0)" hasclick="1">获取手机验证码</a>
                </div>
            </div>
            <span  id="user-number-label"></span>
            <form:errors path="number" cssClass="num_error" ></form:errors>

            <div class="pt50">
                <button class="i_btn b-ffaa3b cf r5 lh2" type="button" onclick = "checkUser();">注册</button>
            </div>
        </div>
    </form:form>
</article>


</body>
</html>
